<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>新增店铺</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
	</style>
</head>

<body>
	<div>
		<form data-id="add_stores" action="#">
			<p>个人信息</p>
			<hr>
			<p>用户名</p>
			<input name="user_name" type="text" value="" />
			<p>联系电话</p>
			<input name="user_phone" type="text" value="" />
			<p>微信号</p>
			<input name="user_wxnum" type="text" value="" />
			<p>微信二维码</p>
			<input name="user_wximg" type="file" accept="image/*" />
			<img data-id='user_wximg' src="" alt="" />
			<br>
			<br>
			<br>
			<hr>
			<p>店铺信息</p>
			<br>
			<p>店铺名称</p>
			<input name="store_name" type="text" value="" />
			<p>店铺地址</p>
			<input name="store_local" type="text" value="" />
			<p>店铺图片</p>
			<input name="store_img" type="file" accept="image/*" />
			<img data-id='store_img' src="" alt="" />
			<br>
			<br>
			<br>
			<hr>
			<br>
			<br>

			<input type="button" data-id="add" value="保存信息">

		</form>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script>
		const add = document.querySelector('[data-id="add"]');
		const form = document.querySelector('[data-id="add_stores"]');
		const res_user_wximg = document.querySelector('[data-id="user_wximg"]');
		const res_store_img = document.querySelector('[data-id="store_img"]');
		add.addEventListener('click', async () => {
			const user_name = form.user_name.value;
			if (!user_name) {
				alert('缺少字段user_name');
				return;
			}
			const user_phone = form.user_phone.value;
			if (!user_phone) {
				alert('缺少字段user_phone');
				return;
			}
			const user_wxnum = form.user_wxnum.value;
			if (!user_wxnum) {
				alert('缺少字段user_wxnum');
				return;
			}
			const user_wximg = form.user_wximg.value;
			if (!user_wximg) {
				alert('缺少字段user_wximg');
				return;
			}
			const store_name = form.store_name.value;
			if (!store_name) {
				alert('缺少字段store_name');
				return;
			}
			const store_local = form.store_local.value;
			if (!store_local) {
				alert('缺少字段store_local');
				return;
			}
			const store_img = form.store_img.value;
			if (!store_img) {
				alert('缺少字段store_img');
				return;
			}

			const formData = new FormData(form);
			// const res = await ajax('post', './user/form', formData);
			// console.log(res);

			$.ajax({
				type: 'post',
				url: './user/form',
				data: formData,
				async: true,
				cache: false,
				contentType: false,
				processData: false,
				success(e) {
					console.log(e);
					res_user_wximg.src = 'http://140.143.122.74:8000' + e.user_wximg;
					res_store_img.src = 'http://140.143.122.74:8000' + e.store_img;
				}
			});
		});

		function ajax(method, url, data) {
			return new Promise((resolve, reject) => {
				const ajax = new XMLHttpRequest();
				ajax.open(method, url, true);
				if (method === 'get') {
					ajax.send();
				} else {
					ajax.setRequestHeader('content-type', 'multipart/form-data;charset=utf-8');
					ajax.send(data);
				}
				ajax.onreadystatechange = function () {
					if (ajax.readyState == 4) {
						if ((ajax.status >= 200 && ajax.status < 300) || ajax.status == 304) {
							resolve(this.responseText);
						} else {
							reject(this.responseText);
						}
					}
				}
			});
		}
	</script>
</body>

</html>